<template>
  <div class="box">

        <!-- <div class="top clearfix"> -->
          <div class="top_dizhi">
              <span class="dizhi">
                  东城区北京市政府
              </span>
              <span class="tianqi">
                  <div class="tian_box">
                      <p class="shezhidu">-3°</p>
                      <p class="tianqi_zhangtai">多云夜</p>
                  </div>
                  <img src="../assets/image/yuncai.png">
              </span>
          </div>

        <div class="sou">
          <div class="top_zhong">
              <p>搜索商家、商品名称</p>
          </div>
        </div>
          
          <swiper :options="swiperOption1" ref="mySwiper" class="top_bottom clearfix">
            <!-- slides -->
            <swiper-slide class="slide"> 
                德克士
            </swiper-slide>
            <swiper-slide class="slide">
                黄焖鸡
            </swiper-slide>
            <swiper-slide class="slide">
                鸡排
            </swiper-slide>
            <swiper-slide class="slide">
                水果39减20
            </swiper-slide>
            <swiper-slide class="slide">
                烧烤
            </swiper-slide>
            <swiper-slide class="slide">
                饺子
            </swiper-slide>
            <swiper-slide class="slide">
                麻辣香锅
            </swiper-slide>
            <swiper-slide class="slide">
                卤煮
            </swiper-slide>
            <swiper-slide class="slide">
                黄焖鸡
            </swiper-slide>
            <swiper-slide class="slide">
                德克士
            </swiper-slide>
          </swiper>
         
        <!-- </div> -->
        
        
        <div class="zhong">
            <swiper :options="swiperOption" ref="mySwiper">
                <!-- slides -->
                <swiper-slide>
                    <div class="zhong_t clearfix">
                        <dl class="dl">
                            <dt><img src="../assets/logo.png"/></dt>
                            <dd class="dd_f">美食</dd>
                        </dl>
                        <dl class="dl">
                            <dt><img src="../assets/logo.png"/></dt>
                            <dd class="dd_f">美食</dd>
                        </dl>
                        <dl class="dl">
                            <dt><img src="../assets/logo.png"/></dt>
                            <dd class="dd_f">美食</dd>
                        </dl>
                        <dl class="dl">
                            <dt><img src="../assets/logo.png"/></dt>
                            <dd class="dd_f">美食</dd>
                        </dl>
                        <dl class="dl">
                            <dt><img src="../assets/logo.png"/></dt>
                            <dd class="dd_f">美食</dd>
                        </dl>
                        <dl class="dl">
                            <dt><img src="../assets/logo.png"/></dt>
                            <dd class="dd_f">美食</dd>
                        </dl>
                        <dl class="dl">
                            <dt><img src="../assets/logo.png"/></dt>
                            <dd class="dd_f">美食</dd>
                        </dl>
                        <dl class="dl">
                            <dt><img src="../assets/logo.png"/></dt>
                            <dd class="dd_f">美食</dd>
                        </dl>
                    </div>
                </swiper-slide>
                <swiper-slide>
                    <div class="zhong_t clearfix">
                        <dl class="dl">
                            <dt><img src="../assets/logo.png"/></dt>
                            <dd class="dd_f">美食</dd>
                        </dl>
                        <dl class="dl">
                            <dt><img src="../assets/logo.png"/></dt>
                            <dd class="dd_f">美食</dd>
                        </dl>
                        <dl class="dl">
                            <dt><img src="../assets/logo.png"/></dt>
                            <dd class="dd_f">美食</dd>
                        </dl>
                        <dl class="dl">
                            <dt><img src="../assets/logo.png"/></dt>
                            <dd class="dd_f">美食</dd>
                        </dl>
                        <dl class="dl">
                            <dt><img src="../assets/logo.png"/></dt>
                            <dd class="dd_f">美食</dd>
                        </dl>
                        <dl class="dl">
                            <dt><img src="../assets/logo.png"/></dt>
                            <dd class="dd_f">美食</dd>
                        </dl>
                    </div>
                </swiper-slide>
                <!-- Optional controls -->
                <div class="swiper-pagination"  slot="pagination"></div>
            </swiper>

			
        </div>


        <div class="hongbao">
            <img src="../assets/image/hongbao.png">
        </div>


        <div class="tuijianshangjia">
            <p>-- 推荐商家 --</p>
        </div>

        <router-link tag="div" to="/xiangqing" class="shangjiapingtai">
            <div class="shangjiapingtai_box clearfix">
                <div class="shangjiapingtai_img">
                    <img src="../assets/image/DQbingqiling.png">
                </div>
                <div class="shangjiapingtai_xiangqing">
                    <h2>
                        <i class="back">品牌</i>
                        <span class="dianming">和合谷(东城区王府井书店店)</span>
                    </h2>
                    <div class="qingjia">
                        ★★★★☆
                        <span>4.5</span>
                        <span>月售316单</span>
                    </div>
                    <div class="kuaidi">
                        <span class="kuaidi_left">￥20起送 | 配送费￥7</span>
                        <span class="kuaidi_right">1.15KM | 47分钟</span>
                    </div>
                </div>
            </div>
            <div class="shangjiapingtai_houdong">
                <div class="houdong_pingwei">
                    <img src="../assets/image/xiaolian.png">
                    <span>口碑人气好店</span>
                </div>

                <div class="houdong_xingyonghu">
                    <i>首</i>
                    <span>新用户下单立减17元</span>
                </div>
            </div>
        </router-link>

        <my-footer></my-footer>
  </div>
</template>

<script>
import myFooter from '@/components/myfooter'

export default {
    name:"box",

    data(){
        return{
            swiperOption:{
                pagination: {
                    el: '.swiper-pagination',
                },
            },
            swiperOption1:{
                slidesPerView: 'auto',
            }
        }
    },
    components:{
        myFooter
    }
}
</script>

<style lang="less">
.pxToRem(@p, @px){
    @{p}: @px / 75px * 1rem;
}

html, body {
    position: relative;
    height: 100%;
}
body {
    background: #eee;
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size: 14px;
    color:#000;
    margin: 0;
    padding: 0;
}
.swiper-container {
    width: 100%;
    height: 100%;
}
.swiper-slide {
    width: auto;
    text-align: center;
    font-size: 18px;
    background: #0085ff;
    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}



















    
    .top_dizhi{
        width: 100%;
        color:#fff;
        display: flex;
        background: #0085ff;
        .dizhi{
            padding-left:5%;
            width: 80%;
            .pxToRem(line-height,80);
            .pxToRem(font-size,30);
        }
        .tianqi{
            display: flex;
            .shezhidu{
                .pxToRem(line-height,50);
                .pxToRem(font-size,30);
                text-align: center;
            }
            .tianqi_zhangtai{
                font-weight: 200;
                .pxToRem(font-size,1);
            }
            img{
                width: 40%;
                height: 100%;
            }
        }
    }


.sou{
    width: 100%;
    height: 60px;
    background: #0085ff;
    position:sticky;
    top:0;
    z-index: 999;
    display: flex;
    flex-direction: column;
    justify-content: center;
    .top_zhong{
        .pxToRem(font-size,30);
        width: 90%;
        margin-left: 5%;
        .pxToRem(height, 50);
        background: #fff;
        text-align: center;
        .pxToRem(line-height, 50);
    }
}
    

    .top_bottom{
        background: #0085ff;
        .slide{
            padding:0 2%;
            .pxToRem(line-height,100);
            color:#fff;
        }
    }



.zhong{
    .zhong_t{
        background: #FFFFFF;
        .dl{
            width: 25%;
            float: left;
            margin-top: 0 5px;
            text-align: center;
            padding-top: 2%;
            padding-bottom: 4%;
            img{
                width: 30%;
            }
            .dd_f{
                font-size: 14px;
                color:  #666666;
            }
        }
    }
}




.hongbao{
    width: 100%;
    img{
        width:100%;
    }
}


.tuijianshangjia{
    background: #fff;
    p{
        text-align: center;
        .pxToRem(line-height,100);
        .pxToRem(font-size,50);
    }
    ul{
        li{
            display: flex;
            width: 90%;
            margin-left: 2%;
            .image{
                border: 1px solid #ccc;
                img{
                    display: block;
                    width: 100%;
                    height: 100%;
                }
            }
            
            .jie{
                .pxToRem(padding-left,20);
                .jieshao{
                    display: flex;
                    font-weight: 800;
                    .pxToRem(font-size,30);
                    i{
                        .pxToRem(line-height,35);
                        .pxToRem(padding-left,5);
                        .pxToRem(padding-right,5);
                        font-weight: 700;
                        background: #ffe339;
                    }
                    ul{
                        display: flex;
                        li{
                            color:#999;
                            border:1px solid #ccc;
                        }
                    }
                }

                .yueshou{
                    .pxToRem(line-height, 130);
                    .pxToRem(font-size,25);
                }

                .songfan{
                    .pxToRem(font-size,25);
                }

            }
        }
        
    }
}


.shangjiapingtai{
    width: 100%;
    background: #fff;
    margin-bottom: 500px;
    .shangjiapingtai_box{
        width: 100%;
        display: flex;
        .shangjiapingtai_img{
            width: 23%;
            img{
                .pxToRem(width, 150);
                 border: 1px solid #ccc;
            }
        }
        .shangjiapingtai_xiangqing{
            width: 77%;
            .pxToRem(line-height,60);
            h2{
                .pxToRem(font-size,30);
                font-weight: 700;
                i{
                    background: yellow;
                }
            }
            .qingjia{
                .pxToRem(font-size,25);
            }
            .kuaidi{
                .pxToRem(font-size,25);
                .kuaidi_left{
                    float: left;
                }
                .kuaidi_right{
                    float: right;
                }
            }
        }
    }
    .shangjiapingtai_houdong{
        .pxToRem(padding-left,200);
        .houdong_pingwei{
            img{
                width: 4%;
                height: 20%;
            }
            .pxToRem(font-size,25);
            .pxToRem(line-height,50);
            border-bottom: 1px dashed #ccc;
        }
        .houdong_xingyonghu{
            .pxToRem(line-height,50);
            .pxToRem(font-size,25);
            i{
                color:#fff;
                background: green;
            }
        }
    }
}
</style>
